import editorStyle from '../style/default-style';
import G6, {IShape} from '@antv/g6';
import StateType from '../consts/state-type';
import NodeAttrField from "../consts/node-attr-field";
import {IElement} from "@antv/g-base/src/interfaces";

const polylineDefaultOptions = {
    icon: null,
    iconStyle: {
        width: 12,
        height: 12,
        left: 2,
        top: 2,
    },
    style: {
        ...editorStyle.nodeStyle,
        fill: '#E7F7FE',
        stroke: '#1890FF',
        cursor: 'default',
    },
    stateStyles: {
        selected: {
            fill: '#95D6FB',
            strokeWidth: 3,
        },
        hover: {
            cursor: editorStyle.cursor.hoverNode,
        }
    },
    selectboxStyle: {
        radius: 0,
        stroke: '#aaaaaa',
        lineWidth: 1,
        lineDash:  [2, 2],
    }
};

export default function () {

    G6.registerEdge(
        'direct-polyline',
        {
            /**
             * 绘制边，包含文本
             * @param  {Object} cfg 边的配置项
             * @param  {G.Group} group 图形分组，边中的图形对象的容器
             * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 可以获取到
             */
            // draw(cfg: ModelConfig | undefined, group: IGroup | undefined): IShape {
            //     console.log('draw line ------------------------------ > ');
            //     return null as unknown as IShape;
            // },
            // /**
            //  * 绘制后的附加操作，默认没有任何操作
            //  * @param  {Object} cfg 边的配置项
            //  * @param  {G.Group} group 图形分组，边中的图形对象的容器
            //  */
            // afterDraw(cfg, group) {
            // },
            // /**
            //  * 更新边，包含文本
            //  * @override
            //  * @param  {Object} cfg 边的配置项
            //  * @param  {Edge} edge 边
            //  */
            // update(cfg, edge) {
            //
            // },
            /**
             * 更新边后的操作，一般同 afterDraw 配合使用
             * @override
             * @param  {Object} cfg 边的配置项
             * @param  {Edge} edge 边
             */
            afterUpdate(cfg, edge) {
                if (!edge) {
                    return ;
                }

                setTimeout(() => {
                    const group = edge.getContainer();
                    const existSelectBox = group?.find((item: IShape) => item.attr(NodeAttrField.SELECTBOX_IS_SELECTBOX)) as IElement;
                    existSelectBox?.attr({
                        x: edge.getBBox().minX - 5,
                        y: edge.getBBox().minY - 5,
                        width: edge.getBBox().width - 1 + 10,
                        height: edge.getBBox().height - 1 + 10,
                    });

                    console.log(existSelectBox, edge.getBBox());
                }, 0);
            },
            /**
             * 设置边的状态，主要是交互状态，业务状态请在 draw 方法中实现
             * 单图形的边仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法
             * @param  {String} name 状态名称
             * @param  {Object} value 状态值
             * @param  {Edge} edge 边
             */
            setState(name, value, edge) {
                if (!edge) {
                    return ;
                }
                // console.log(`edge state change..    name: ${name}, value: ${value}`);
                const group = edge.getContainer();
                if (name === StateType.SELECTED) {
                    const existSelectBox = group?.find((item: IShape) => item.attr(NodeAttrField.SELECTBOX_IS_SELECTBOX)) as IElement;
                    if (value) {
                        if (existSelectBox) {
                            return ;
                        }
                        const shape = group?.addShape('rect', {
                            draggable: false,
                            attrs: {
                                ...polylineDefaultOptions.selectboxStyle,
                                x: edge.getBBox().minX - 5,
                                y: edge.getBBox().minY - 5,
                                width: edge.getBBox().width - 1 + 10,
                                height: edge.getBBox().height - 1 + 10,
                                '$isSelectBox': true
                            }
                        });
                    } else {
                        group?.removeChild(existSelectBox);
                    }
                }
            },
        },
        'polyline'
    );
}
